import { useMemo, useState } from "react";
import Style from "./NcVerify.module.css";
import warn from "../../assets/warn.png";
import IconClose from "../../assets/close.svg";

function Header(props) {
  return (
    <div className={Style.Header}>
      <span>提示</span>
      <img src={IconClose} alt="" onClick={props.cancel} />
    </div>
  );
}

function Content(props) {
  const [value, setValue] = useState([]);
  const input = (i, e) => {
    const v = e.target.value;
    const pas = v.replace(/[\s\S]/g, "*");
    const temp = [...value];
    temp[i] = pas;
    setValue(temp);
    props.input(i, v);
    if (v) {
      setTimeout(() => {
        const dom = document.getElementById(`numcode-mv-input-${++i}`);
        !!dom && dom.focus();
      }, 0);
    }
  };
  const data = useMemo(() => [0, 1, 2, 3, 4, 5], []);

  return (
    <div className={Style.Content}>
      <span>
        为保障平台的数据安全和您的账号安全，需要验证您的数字安全密码。
      </span>
      <span>数字安全密码</span>
      <div className={Style.Input}>
        {data.map((i) => (
          <input
            key={`key-numcode-mv-input-${i}`}
            id={`numcode-mv-input-${i}`}
            maxLength={1}
            autoComplete="off"
            value={value[i] || ""}
            onChange={(e) => input(i, e)}
          />
        ))}
      </div>
    </div>
  );
}

function Warning() {
  return <div className={Style.Warning}>请输入正确的数字安全密码</div>;
}

function Footer(props) {
  return (
    <div className={Style.Footer}>
      <span onClick={props.confirm}>确 定</span>
      <span onClick={props.cancel}>取 消</span>
    </div>
  );
}
function Tips(props) {
  return props.showTips ? (
    <div className={Style.Tips}>
      <img src={warn} alt="" />
      数字安全密码将于{props.expirationTime}
      日后过期，逾期无法使用，请及时修改。
    </div>
  ) : null;
}
function NcVerify(props) {
  const [animation, setAnimation] = useState("fadeInDown");
  const [isWarning, setIsWaring] = useState(false);
  const [codes, setCodes] = useState([]);
  const showTips = useMemo(() => props.showTips, [props.showTips]);
  const expirationTime = useMemo(
    () => props.expirationTime,
    [props.expirationTime]
  );
  const input = (i, e) => {
    const temp = [...codes];
    temp[i] = e;
    setCodes(temp);
    setIsWaring(false);
  };

  const cancel = () => {
    setAnimation("fadeOutDown");
    setTimeout(() => {
      props.close();
    }, 250);
  };

  const confirm = async () => {
    const isValid = codes.filter((c) => !!c).length === 6;
    if (isValid) {
      try {
        await props.confirm(codes.toString().replace(/,/g, ""));
        setAnimation("fadeOutDown");
        setTimeout(() => {
          props.close();
        }, 80);
      } catch (error) {}
    } else {
      setIsWaring(true);
    }
  };

  return (
    <div className={`${Style.NcVerify} ${animation}`}>
      <div className={`${Style.Box} ${animation + "Y"}`}>
        <Header cancel={cancel} />
        <Content input={input} />
        {isWarning ? <Warning /> : null}
        <Tips showTips={showTips} expirationTime={expirationTime} />
        <Footer confirm={confirm} cancel={cancel} />
      </div>
    </div>
  );
}

export default NcVerify;
